<template>
  <div id="searchBar">
    <el-container>
      <el-autocomplete
        :fetch-suggestions="fetchResult"
        :popper-append-to-body="false"
        v-model="searchInput"
        :trigger-on-focus="false"
        class="inline-input form-control input-style searchInput"
        placeholder="请输入搜索地址"
        suffix-icon="el-icon-search"
        type="text"
        placement="bottom"
        popper-class="pop-autocomplete"
        @select="selectResult"
      >
        <template slot-scope="{ item }">
          <div class="name">{{ item.name }}</div>
          <span class="address">{{ item.district }}</span>
        </template>
      </el-autocomplete>
    </el-container>

    <div v-show="showInfo" ref="info">
      <el-card id="box-card">
        <div id="del-div">
          <el-link icon="el-icon-close" type="primary" @click="closeInfo()"></el-link>
        </div>
        <el-descriptions :column="1" :title="chosen.name">
          <el-descriptions-item label="地区">{{ chosen.district }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ chosen.address }}</el-descriptions-item>
        </el-descriptions>
        <el-row>
          <el-col :span="12">
            <el-button class="btn_to" @click="goTo">去这里</el-button>
          </el-col>
          <el-col :span="12">
            <el-button class="btn_from" @click="goFrom">设为起点</el-button>
          </el-col>
        </el-row>
      </el-card>
      <div class="amap-info-sharp">
        <i class="el-icon-caret-bottom"></i>
      </div>
    </div>

  </div>
</template>

<script>
import MapData from "../store/MapData";
import AboutMe from "./AboutMe";

export default {
  name: "SearchBar",
  props: ['boxWidth'],
  components: {AboutMe},
  data() {
    return {
      searchInput: "",
      data: [],
      chosen: {
        name: "",
        district: "",
        address: "",
        location: null
      },
      resultMarker: null,
      showInfo: false,
      infoWindow: null
    }
  },
  methods: {
    fetchResult(queryString, cb) {
      let AMap = MapData.AMap;
      let _this = this;
      //输入提示
      AMap.plugin(['AMap.AutoComplete'], function () {
        const auto = new AMap.AutoComplete();
        auto.search(_this.searchInput, function (status, result) {
          if (status !== "error") {
            _this.data = result.tips;
            cb(_this.data)
          } else {
            _this.data = "";
          }
        })
      });
    },
    selectResult(item) { //搜索结果后生成标记
      let map = MapData.Map;
      let AMap = MapData.AMap;
      this.chosen.name = item.name;
      this.chosen.district = item.district;
      this.chosen.address = item.address;
      this.chosen.location = item.location;
      this.searchInput = item.name;
      if (this.resultMarker !== null) {
        map.remove(this.resultMarker);
      }

      //--------添加标记---------
      const icon = new AMap.Icon({
        size: new AMap.Size(36, 36),    // 图标尺寸
        image: require("../assets/icons/target.png"),  // Icon的图像
        imageOffset: new AMap.Pixel(0, 0),
        imageSize: new AMap.Size(36, 36)   // 根据所设置的大小拉伸或压缩图片
      });
      const marker = new AMap.Marker({
        position: item.location,
        icon: icon, // 添加 Icon 实例
        title: item.name,
        zoom: 15
      });
      this.resultMarker = marker;
      map.add(marker);
      map.setZoomAndCenter(16, item.location);


      let infoWindow = new AMap.InfoWindow({
        position: item.location,
        isCustom: true,
        offset: new AMap.Pixel(24, 24),
        closeWhenClickMap: true,
        content: this.$refs.info
      });

      this.infoWindow = infoWindow;

      marker.on('click', () => {
        this.showInfo = true;
        infoWindow.open(map);
      })
    },
    closeInfo() {
      this.showInfo = false;
      this.infoWindow.close();
    },
    goTo() {
      this.infoWindow.close();
      let name = this.chosen.name;
      let position = this.chosen.location;
      this.bus.$emit("goTo", {name, position});
    },
    goFrom() {
      this.infoWindow.close();
      let name = this.chosen.name;
      let position = this.chosen.location;
      this.bus.$emit("goFrom", {name, position});
    }
  },
}
</script>

<style scoped>
.searchInput >>> .el-input__inner {
  border: 0;
}

.searchInput >>> .pop-autocomplete {
  width: 500px;
}

.pop-autocomplete >>> .li {
  line-height: normal;
  padding: 7px;
}

.name {
  text-overflow: ellipsis;
  overflow: hidden;
}

.address {
  font-size: 12px;
  color: #b4b4b4;
}

.highlighted .address {
  color: #ddd;
}

.amap-info-sharp {
  position: absolute;
  bottom: -1px;
  left: 48.5%;
  color: #fff;
  z-index: -1;
}

#box-card {
  padding: 0 10px 3px 10px;
  width: 400px;
  border-radius: 10px;
}

#del-div {
  right: 20px;
  top: 20px;
  position: absolute;
  transform: scale(1.2);
}


.btn_to {
  margin-left: 20%;
}

.btn_from {
  margin-right: 80%;
}

</style>
